{extend name="layout/layout" /}

{block name="navbar"}{/block}

{block name="style"}
	<style>
		body, .mui-content{
			background: #fff;
		}

		.login{
			padding: 30px 20px;
		}

		.mui-input-group:before, .mui-input-group:after{
			height: 0;
		}

		.logo{
			margin-bottom: 20px;
		}

		.logo img{
			max-width: 100px;
		}

		.mui-input-row label{
			width: 20%;
			text-align: center;
		}

		.mui-input-row label~input{
			width: 80%;
			font-size: 14px;
		}

		.forget{
			margin-top: 20px;
			font-size:12px;
		}

		.forget a{
			text-decoration: underline;
		}

	</style>
{/block}

{block name="main"}
	<div class="login" v-cloak>
		<form class="mui-input-group">
			<div class="mui-input-row">
				<label><i class="mui-icon iconfont icon-shoujihao"></i></label>
				<input type="number" name="phone" v-model="phone" class="mui-input-clear" placeholder="请输入对方手机号">
			</div>

			<div class="mui-input-row">
				<label><i class="mui-icon iconfont icon-jine"></i></label>
				<input type="number" name="amount" v-model="amount"  placeholder="请输入转帐金额">
			</div>

			<button class="mui-btn mui-btn-block mui-btn-theme" type="button" @tap="transfer()">确认转帐</button>

		</form>
	</div>
{/block}

{block name="script"}
	<script>

		var myVue = new Vue({
			el:'.login',
			data:{
				phone: '',
				amount:'',
			},
			mounted: function(){
				if(token){
					this.token = token;
				} else {
					this.login();
				}
			},
			methods: {
				login:function(){
					location.href = '/mobile/user/login';
				},
				transfer:function(){
					if(!this.phone) {
						mui.toast('请填写对方手机号');
						return;
					}

					var preg = /1\d{10}/;
					if(!preg.test(this.phone)){
						mui.toast('手机号码格式不正确');
						return;
					}

					if(!this.amount || this.amount <= 0) {
						mui.toast('请填写转帐金额');
						return;
					}

					var url =  'funds/transfer';
					var that = this;
					layer.open({
						type:2,
						shadeClose:false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});
					request(that, {'url': url, 'data': {phone:that.phone, amount:that.amount}}, function(res){
						layer.closeAll();
						mui.toast(res.msg);
						if(res.code == 200) {
							mui.back();
						}	
					});

				}
			}
		});
	</script>
{/block}